import React from 'react';
import {withRouter} from 'react-router-dom';
// import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import UserActions from '@redux/actions/user.action.js';

import RCModal from '@components/modal/index.jsx';
import PerimBtn from '@components/perimBtn/index.jsx';

import Tools from '@untils/tools.jsx';
import {USERAPIS} from '@apis/index.js';
import Request from '@service/ajax.js';

import './scss/header.scss';

const _req = new Request();

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.setCallback = Tools.setCallback.bind(this);
        this.seekPath = Tools.seekPath.bind(this);
        // this.UserActions = bindActionCreators(Tools.objectAssign({},UserActions), this.props.dispatch)
    }

    componentWillMount() {
        // this.UserActions.userMsgAction();
        let data = {data:Tools.getCookies(['name', 'pwd'])};
        this.props.requestUserMsg(data);
    }

    componentDidMount() {
        this.setCallback(Tools.getCookies(['name']));
    }

    fixPwd() {
        let {originPwd = '', confirmPwd = ''} = this.state;
        let options = Tools.objectAssign(USERAPIS.FIXPWD, {data: {originPwd, confirmPwd}});
        _req.axios(options).then(res => {
            Tools.tooltip({level: 'success', content: '修改成功'}, null, this.setCallback({
                originPwd: '',
                newPwd: '',
                confirmPwd: '',
                fixPwdPop: false
            }));
        }, err => {
            Tools.tooltip({level: 'error', content: err.message})
        })
    }

    logout() {
        Tools.setCookie({name: '', pwd: ''}, 0);
        this.seekPath('/login');
    }

    render() {
        let {originPwd = '', newPwd = '', confirmPwd = '', fixPwdPop = false, logoutPop = false, name = '---'} = this.state;
        let disable = !((!!originPwd && originPwd.length >= 6) && (!!newPwd && newPwd.length >= 6 && newPwd === confirmPwd) && (!!confirmPwd && confirmPwd.length >= 6));
        return (
            <div className="common-header">
                <span className="page-logo cp"
                    onClick={() => this.seekPath('/layout/home')}
                >
                    <img className="logo" alt="logo" src={require('@assets/images/bg-logo.png')}/>
                    <span className="title">智能内容监控系统</span>
                </span>
                <div className="header-content">
                    <div className="header-box"></div>
                    <div className="user-center cp">
                        <img className="user-img" alt="user-img" src={require('@assets/images/bg-admin.png')}/>
                        <span className="user-name">{name}<i className="icon-i"> </i></span>
                        <div className="config-list-content">
                            <PerimBtn wrapClass="user-option"
                                      path='/test,/test/1'
                                      type='permission-disabled-admin'
                                      clickEvent={() => this.setCallback({fixPwdPop: true})}
                            > 资源配置 </PerimBtn>
                            <PerimBtn wrapClass="user-option"
                                      clickEvent={() => this.setCallback({fixPwdPop: true})}
                            > 修改密码 </PerimBtn>
                            <PerimBtn wrapClass="user-option"
                                      clickEvent={() => this.setCallback({logoutPop: true})}
                            > 退出登录 </PerimBtn>
                        </div>
                    </div>
                </div>
                {/*弹框*/}
                <RCModal visible={fixPwdPop}
                         disable={disable}
                         onOk={() => this.fixPwd()}
                         onCancel={() => this.setCallback({
                             originPwd: '',
                             newPwd: '',
                             confirmPwd: '',
                             fixPwdPop: false
                         })}
                >
                    <div className="fix-pwd-content">
                        <ul className="fix-list">
                            <li className="fix-item">
                                <div className="ipt-parent">
                                    <input type="password" className="item-ipt" placeholder="请输入原始密码" maxLength="20"
                                           value={originPwd}
                                           onChange={(e) => {
                                               this.setCallback({originPwd: e.target.value})
                                           }}
                                    />
                                </div>
                                <span className="item-title">原始密码：</span>
                            </li>
                            <li className="fix-item">
                                <div className="ipt-parent">
                                    <input type="password" className="item-ipt" placeholder="请输入新密码" maxLength="20"
                                           value={newPwd}
                                           onChange={(e) => {
                                               this.setCallback({newPwd: e.target.value})
                                           }}
                                    />
                                </div>
                                <span className="item-title">新密码：</span>
                            </li>
                            <li className="fix-item">
                                <div className="ipt-parent">
                                    <input type="password" className="item-ipt" placeholder="请输入新密码" maxLength="20"
                                           value={confirmPwd}
                                           onChange={(e) => {
                                               this.setCallback({confirmPwd: e.target.value})
                                           }}
                                    />
                                </div>
                                <span className="item-title">确认密码：</span>
                            </li>
                        </ul>
                    </div>
                </RCModal>
                {/*退出提示框*/}
                <RCModal visible={logoutPop}
                         onOk={() => this.logout()}
                         onCancel={() => this.setCallback({logoutPop: false})}
                         title="退出登录"
                >
                    <div className="login-out">您确定退出登陆？</div>
                </RCModal>
            </div>
        )
    }
}

Header = connect(null, dispatch => {
    return {
        requestUserMsg: (data) => dispatch(UserActions.userMsgAction(data))
    }
})(Header);

export default withRouter(Header);